<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 后台主题UI框架 - Bootstrap Table</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
</head>

<body class="gray-bg">

    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>基本表格</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#">选项1</a>
                        </li>
                        <li><a href="#">选项2</a>
                        </li>
                    </ul>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <div class="example">
                            <table id="exampleTableFromData" data-mobile-responsive="true">
                                <thead>
                                    <tr>
                                        <th data-field="Tid">ID</th>
                                        <th data-field="First">姓名</th>
                                        <th data-field="sex">性别</th>
                                        <th data-field="Score">评分</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>AJAX渲染</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#">选项1</a>
                        </li>
                        <li><a href="#">选项2</a>
                        </li>
                    </ul>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <div class="example-wrap">
                            <div class="example">
                                <table id="table"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.7"></script>
    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>
    <!-- Bootstrap table -->
    <script src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <script>
        $(function () {
            var bt_data = [{
              "Tid": "1",
              "First": "张三丰",
              "sex": "男",
              "Score": "50"
            }, {
              "Tid": "2",
              "First": "张无忌",
              "sex": "男",
              "Score": "94"
            }, {
              "Tid": "3",
              "First": "张翠山",
              "sex": "男",
              "Score": "80"
            }, {
              "Tid": "4",
              "First": "宋青书",
              "sex": "男",
              "Score": "67"
            }, {
              "Tid": "5",
              "First": "殷素素",
              "sex": "女",
              "Score": "100"
            }, {
              "Tid": "6",
              "First": "周芷若",
              "sex": "女",
              "Score": "77"
            }, {
              "Tid": "7",
              "First": "赵敏",
              "sex": "女",
              "Score": "87"
            }];
    
            $('#exampleTableFromData').bootstrapTable({
              data: bt_data,
            });
    
            $("#table").bootstrapTable({
                url: 'https://examples.wenzhixin.net.cn/examples/bootstrap_table/data', //请求后台的URL（*）
                contentType: "application/x-www-form-urlencoded",//用post请求，这个是必须条件，必须加上，get可以不用，亲测
                dataType: "json",
                method: "get",//请求方式（*）
                //toolbar: '#toolbar', //工具按钮用哪个容器
                undefinedText: "-", /*为undefiend时显示的字*/
                striped: false, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页（*）
                sortable: false, //是否启用排序
                sortOrder: "asc", //排序方式
                sortName: "", //排序方式
                toolbar: '', // 指定工作栏
                loadingFontSize: 13, // 自定义加载文本的字体大小
                //search: true, //是否使用客户端搜索
                queryParams: queryInitParams,//传递参数（*）
                responseHandler: responseHandler,
                queryParamsType: "limit",
                sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 20, 50, 999], //可供选择的每页的行数（*）
                showColumns: false, //是否显示所有的列
                showRefresh: false, //是否显示刷新按钮
                minimumCountColumns: 2, //最少允许的列数
                clickToSelect: true, //是否启用点击选中行
                strictSearch: true,
                //height: 460, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                showToggle: false, //是否显示详细视图和列表视图的切换按钮
                uniqueId: "id", //每一行的唯一标识，一般为主键列
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                showExport: false, //是否显示导出
                exportDataType: 'basic', //'basic', 'all', 'selected'.
                escape: true,//html转意
                // align: "center",
                columns: [
                    [{
                      field: 'state',
                      checkbox: true,
                      rowspan: 2,
                      align: 'center',
                      valign: 'middle'
                    }, {
                      title: 'Item ID',
                      field: 'id',
                      rowspan: 2,
                      align: 'center',
                      valign: 'middle',
                      sortable: true,
                      footerFormatter: totalTextFormatter
                    }, {
                      title: 'Item Detail',
                      colspan: 3,
                      align: 'center'
                    }],
                    [{
                      field: 'name',
                      title: 'Item Name',
                      sortable: true,
                      footerFormatter: totalNameFormatter,
                      align: 'center'
                    }, {
                      field: 'price',
                      title: 'Item Price',
                      sortable: true,
                      align: 'center',
                      footerFormatter: totalPriceFormatter
                    }, {
                      field: 'operate',
                      title: 'Item Operate',
                      align: 'center',
                      clickToSelect: false,
                      events: window.operateEvents,
                      formatter: operateFormatter
                    }]
                ],//表格列
                onLoadSuccess: tableLoadSuccess, //成功渲染回调
            });
            /* 表格查询参数 */
            function queryInitParams(params) {
                var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
                    limit: params.limit, //页面大小
                    offset: params.offset ,//页码
                    search: '',
                };
                return temp;
            }
            /* 表格加载成功事件 */
            function tableLoadSuccess(data) {
                $(".bs-checkbox").css('vertical-align','middle');
            }
            function responseHandler(data) {
                return data;
            }
            /* 刷新表格 */
            function refreshTable(tableId) {
                $("#tableId").bootstrapTable('refresh');
            }
            /* 根据data选中数据 */
            function checkTableBy(id, data) {
                $(id).bootstrapTable("checkBy", data)
            }
            /*根据uniqueId获取所选列*/
            function getRowByUniqueId(id, val) {
                return $(id).bootstrapTable("getRowByUniqueId", val);
            }
            /*table数据单选*/
            function selectSingleData(id){
                var selectContent = $(id).bootstrapTable('getSelections');
                if(typeof(selectContent) == 'undefined' || selectContent == "") {
                    toastr.error("请先选择一条数据!");
                    return false;
                }else if(selectContent.length > 1){
                    toastr.error("只能选择一条数据!");
                    return false;
                }else{
                    var selectData = selectContent[0];
                    return selectData;
                }
            }
            /*table数据多选*/
            function selectMutiData(id){
                var checkedRows= $(id).bootstrapTable('getSelections');
                if(checkedRows.length==0){
                    toastr.error("请先选择一条数据！");
                    return false;
                }else{
                    return checkedRows;
                }
            }
    
            window.operateEvents = {
                'click .like': function (e, value, row, index) {
                  alert('You click like action, row: ' + JSON.stringify(row))
                },
                'click .remove': function (e, value, row, index) {
                  $table.bootstrapTable('remove', {
                    field: 'id',
                    values: [row.id]
                  })
                }
            }
    
            function totalTextFormatter(data) {
                return 'Total'
            }
    
            function totalNameFormatter(data) {
                return data.length
            }
    
            function totalPriceFormatter(data) {
                var field = this.field
                return '$' + data.map(function (row) {
                  return +row[field].substring(1)
                }).reduce(function (sum, i) {
                  return sum + i
                }, 0)
            }
    
            function operateFormatter(value, row, index) {
                return [
                    '<a class="like" href="javascript:void(0)" title="Like">',
                    '<i class="fa fa-heart"></i>',
                    '</a>  ',
                    '<a class="remove" href="javascript:void(0)" title="Remove">',
                    '<i class="fa fa-trash"></i>',
                    '</a>'
                ].join('')
            }
          
        })
    </script>

</body>

</html>